<cfinclude template="dojotree.cfm">


<cffunction name="menuTreeEdit" output="true">
	<cfargument name="pathToDojoJs" default="/dojo/dojo.js">
	<cfargument name="tree_IDs" required="true">
<html>
<head>
<title>Dojo Tree Widget Test (ajax, drag'n'drop and more)</title>

<script type="text/javascript">
	var djConfig = {isDebug: true };
</script>
<script type="text/javascript" src="#pathToDojoJs#"></script>

<script type="text/javascript">
	dojo.require("dojo.widget.*");
	dojo.require("dojo.widget.TreeV3");
	dojo.require("dojo.widget.TreeNodeV3");
	dojo.require("dojo.widget.TreeRpcControllerV3");
	dojo.require("dojo.widget.TreeDndControllerV3");
	dojo.require("dojo.widget.TreeEditor");
	dojo.require("dojo.widget.TreeContextMenuV3");	
	dojo.require("dojo.widget.TreeSelectorV3");
	dojo.require("dojo.widget.TreeEmphasizeOnSelect");	
	dojo.require("dojo.widget.TreeDeselectOnDblselect");
	dojo.require("dojo.widget.TreeDemo");
	dojo.hostenv.writeIncludes();
</script>

<style>
.treeTable {
	width:100%;
}

.treeColumn {
	width:25%;
	vertical-align: top;
	text-align: middle;
	border:1px black dashed;
}
</style>

<script type="text/javascript">

	dojo.addOnLoad(function(){
					
		/* bind demo actions to menu-tree */ 
		dojo.addOnLoad(function() { dojo.widget.TreeDemo.bindDemoMenu(dojo.widget.byId('controller')) });

	});

</script>
</head>
<body>

<div dojoType="TreeSelectorV3" widgetId="selector"></div>	

<!-- selector extensions -->
<div dojoType="TreeEmphasizeOnSelect" selector="selector"></div>

<div dojoType="TreeEditor" widgetId="editor"></div>

<div dojoType="TreeRpcControllerV3" widgetId="controller" editor="editor" RpcUrl="?event=dojo.treeaction&runaction=true"></div>

<div dojoType="TreeDndControllerV3" controller="controller" widgetId="dndcontroller"></div>


<div dojoType="TreeContextMenuV3" toggle="explode" contextMenuForWindow="false" widgetId="contextMenu">
	<div dojoType="TreeMenuItemV3" treeActions="addChild" iconSrc="static/createsmall.gif" widgetId="treeContextMenuCreate" caption="Create"></div>
	<div dojoType="TreeMenuItemV3" treeActions="remove" iconSrc="static/removesmall.gif" caption="Remove" widgetId="treeContextMenuDestroy"></div>
	<div dojoType="TreeMenuItemV3" treeActions="move" iconSrc="static/downsmall.png" caption="Up" widgetId="treeContextMenuUp"></div>
	<div dojoType="TreeMenuItemV3" treeActions="move" iconSrc="static/upsmall.png" caption="Down" widgetId="treeContextMenuDown"></div>
	<div dojoType="TreeMenuItemV3" treeActions="edit" caption="Edit" widgetId="treeContextMenuEdit"></div>
</div>


<div style="display:none">
	<!-- IE has a bug: it reloads all dynamically resolved images, no matter, is it
	new Image() or CSS background. If you don't specify images like that,
	it will reload them every time a node is expanded -->
	<img src="images/TreeV3/i.gif">
	<img src="images/TreeV3/i_half.gif">
	<img src="images/TreeV3/expand_minus.gif">
	<img src="images/TreeV3/expand_plus.gif">
	<img src="images/TreeV3/expand_leaf.gif">
	<img src="images/TreeV3/i_long.gif">
	<img src="images/TreeV3/document.gif">
	<img src="images/TreeV3/open.gif">
	<img src="images/TreeV3/closed.gif">
</div>	


<h3>
Tree with menu, selector, dnd and full operations set.
</h3>

<iframe src="?event=dojo.treebugout" width="500px" height="400px;" style="float:right"></iframe>

<table class="treeTable" cellpadding="10">
<tr>
<td style="border:1px dashed black;">
<cfloop list="#tree_IDs#" index="tree_ID">
	<h4>dojTree#tree_ID#</h4>
	<div dojoType="TreeV3" eagerWidgetInstantiation="true" DNDMode="between;onto" listeners="controller;dndcontroller;selector;contextMenu" toggler="fade" widgetId="tree#tree_ID#" objectId="tree" DNDAcceptTypes="#listQualify(tree_IDs,";")#">
	<cfoutput>#getParents(tree_ID)#</cfoutput>
	</div>
</cfloop>
</tr>
</table>

<hr>

<input type="button" value="Save expanded" onClick="saveExpandedIndices()"/>
</body>
</html>
</cffunction>
<cfoutput>#menuTreeEdit("/srvinc/dojo/dojo.js","1,2")#</cfoutput>
